import React from 'react'

import * as AssetByIdAction  from '../actions/AssetByIdAction';
import { connect }  from 'react-redux';

import AssetGridCell from './AssetGridCell'

class MenuSettingSendMessage extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showMedia: false
    }
  }

  componentDidMount() {
    if (this.props.activeButton.media_id) {
      var media_id = this.props.activeButton.media_id;
      if (this.props.asset && !this.props.asset[media_id]) {
        this.props.dispatch(
          AssetByIdAction.loadAssetByMediaIdAsync({
            media_id: media_id
          })
        )
      }
    }
  }

  componentDidUpdate() {
    if (this.props.activeButton.media_id) {
      var media_id = this.props.activeButton.media_id;
      if (this.props.asset && !this.props.asset[media_id]) {
        this.props.dispatch(
          AssetByIdAction.loadAssetByMediaIdAsync({
            media_id: media_id
          })
        )
      }
    }
  }

  renderMedia() {

  }

  render() {
    var self = this;
    var content = {};
    var media_id = this.props.activeButton.media_id;
    if (self.props.asset && self.props.asset[media_id]) {
      content = {content: self.props.asset[media_id]}
    }
    return (
      <div>
        <div className="">
          <button className="btn btn-success"
                  onClick={(event)=>this.props.onSelectMediaClick(event)}>选择图文消息</button>
        </div>
        <AssetGridCell
          wechat = {self.props.wechat}
          data = {content}/>
      </div>
    )
  }

}

const mapStateToProps = (state, ownProps) => {

  return { asset: state.asset }
}

export default connect(mapStateToProps)(MenuSettingSendMessage)
